<template>
    <div>
        <el-dialog
            :append-to-body="true"
            title="公文种类"
            :visible.sync="visibleDocType"
            width="50%"
            center
            top="5vh"
        >
        <el-table :data="docTypes" @sort-change="sortChange" highlight-current-row v-loading="load.list" border @selection-change="selsChange" @row-click="rowClick" style="width: 100%;">
				<el-table-column prop="typeName" label="类型名称" width="120" show-overflow-tooltip></el-table-column>
				<el-table-column prop="typeRemark" label="类型描述" min-width="80" show-overflow-tooltip></el-table-column>
		</el-table>
		<el-pagination  layout="total, sizes, prev, pager, next" @current-change="handleCurrentChange" @size-change="handleSizeChange" :page-sizes="[10,20, 50, 100, 500]" :current-page="pageInfo.pageNum" :page-size="pageInfo.pageSize"  :total="pageInfo.total" style="float:right;"></el-pagination> 
        </el-dialog>
</div>



</template>

<script>

import { listDocType} from '@/api/mdp/arc/doc/docType';

export default {

    data() {
        return {
            visibleDocType: false,
            docTypes:[],
            load:{ list: false, edit: false, del: false, add: false },//查询中...
            pageInfo:{//分页数据
                total:0,//服务器端收到0时，会自动计算总记录数，如果上传>0的不自动计算。
                pageSize:10,//每页数据
                count:false,//是否需要重新计算总记录数
                pageNum:1,//当前页码、从1开始计算
                orderFields:[],//排序列 如 ['sex','student_id']，必须为数据库字段
                orderDirs:[]//升序 asc,降序desc 如 性别 升序、学生编号降序 ['asc','desc']
            },
        }
    },
    methods: {

        open() {
            this.visibleDocType = true;
        },

        handleSizeChange(pageSize) { 
				this.pageInfo.pageSize=pageSize; 
				this.getDocTypes();
			},
        handleCurrentChange(pageNum) {
            this.pageInfo.pageNum = pageNum;
            this.getDocTypes();
        },
        // 表格排序 obj.order=ascending/descending,需转化为 asc/desc ; obj.prop=表格中的排序字段,字段驼峰命名
        sortChange( obj ){
            var dir='asc';
            if(obj.order=='ascending'){
                dir='asc'
            }else{
                dir='desc';
            }
            if(obj.prop=='xxx'){
                this.pageInfo.orderFields=['xxx'];
                this.pageInfo.orderDirs=[dir];
            }
            this.getDocTypes();
        },
        //选择行docType
        selsChange: function (sels) {
            this.sels = sels;
        }, 
        
        rowClick: function(row, event, column){
            this.visibleDocType = false;
            this.$emit('row-click',row, event, column);//  @row-click="rowClick"
        },

        getDocTypes() {
            let params = {
                pageSize: this.pageInfo.pageSize,
                pageNum: this.pageInfo.pageNum,
                total: this.pageInfo.total,
                count:this.pageInfo.count
            };
            if(this.pageInfo.orderFields!=null && this.pageInfo.orderFields.length>0){
                let orderBys=[];
                for(var i=0;i<this.pageInfo.orderFields.length;i++){ 
                    orderBys.push(this.pageInfo.orderFields[i]+" "+this.pageInfo.orderDirs[i])
                }  
                params.orderBy= orderBys.join(",")
            }

            this.load.list = true;
            listDocType(params).then((res) => {
                var tips=res.data.tips;
                if(tips.isOk){ 
                    this.pageInfo.total = res.data.total;
                    this.pageInfo.count=false;
                    this.docTypes = res.data.data;
                }else{
                    this.$message({ message: tips.msg, type: 'error' });
                } 
                this.load.list = false;
            }).catch( err => this.load.list = false );
		},


    },

    mounted() { 
        this.$nextTick(() => {
            this.getDocTypes();
        }); 
    }


}

</script>

<style scoped>

</style>
